<!--运营维护成本-->
<template>
  <div style="height: 60px">
    <tablleBar
      @submit-swich="swichTable"
      :list="['积水点数量', '饮水安全']"
    ></tablleBar>
  </div>
  <div class="w-100 h-100" style="">
    <div class="bottom">

      <div id="saq" style="width: 100%; height: 100%" v-if="activeItem === 0"></div>

      <div class="list w-100 h-100" v-if="activeItem === 1">
        <div v-for="(item, index) in list" class="item" >
          <div class="title" :class="['title', 'title'+ index]">{{item.label}}</div>

          <div class="child">
            <div class="childItem" :class="child.value ? 'good': 'bad'" v-for="child in item.children">
              <div>{{child.value ? '达标' : '不达标'}}</div>
              <div class="label">{{child.label}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { useOptions } from "@/hook/useOptions";
import saq_title_0 from "@/assets/image/jianshe/saq_title_0.png"
import saq_title_1 from "@/assets/image/jianshe/saq_title_1.png"
import good from "@/assets/image/jianshe/good.png"
import bad from "@/assets/image/jianshe/bad.png"

const titleBg = [saq_title_0, saq_title_1]
const itemBg = [bad, good]

const colorSingleList = ["rgba(184, 235, 143, 1)", "rgba(3, 230, 254, 1)"];

const value = useOptions().nowYear();
const options = [
  {
    value: "2023",
    label: "2023",
  },
];

const offsetX = 10;
const offsetY = 5;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx: any, shape) {
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - offsetX, shape.y - offsetY];
    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
});

// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx: any, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [xAxisPoint[0], xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
    const c4 = [shape.x + offsetX, shape.y - offsetY];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  },
});

// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx: any, shape) {
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
    const c3 = [shape.x, shape.y - offsetX];
    const c4 = [shape.x - offsetX, shape.y - offsetY];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  },
});

// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
let xaxisData: any;
let yaxisData: any;
let yaxisData2: any;

const activeItem = ref(0);

function swichTable(item: any) {
  activeItem.value = item;
}

const props = defineProps({
  selectValue: {
    default: 2024,
  },
});
const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.jsgl.saq[activeItem.value];
    if(activeItem.value === 1){
      data = data[props.selectValue] || []
    }
  } catch (error) {}
  return data;
});
let myChart1: any;
let list = ref([])

const emit = defineEmits([
  "itemChange",
]);

watch(
  () => current.value,
  (val) => {
    emit('itemChange', activeItem.value)
    if (val) {
      if(activeItem.value === 0){
        nextTick(() => {
          setOption(val)
        })
      }else{
        list.value = val || []
      }
    }
  }
);

const setOption = (val) => {
  let option = {
    background: "trasparent",
    tooltip: {
      show: false,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "rgba(255,255,255,0.75)",
      extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
      textStyle: {
        fontSize: 14,
        color: "#000",
      },
      formatter: (params: any, ticket: any, callback: any) => {
        const item = params[1];
        return item.name + " : " + item.value + "";
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      top: "16%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xaxisData,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "#667A8E",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0, // 显示所有标签
        formatter: function (value: any) {
          // 将每个标签中的文本按每四个字符进行分割并加上换行符
          return value.match(/.{1,4}/g).join("\n");
        },
        // 调整标签样式，确保换行显示不会导致标签相互重叠
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
    },
    yAxis: {
      name: "",
      type: "value",
      nameTextStyle: {
        color: "#fff",
        fontWeight: 400,
        fontSize: 14,
      },
      axisLine: {
        show: false,
        lineStyle: {
          width: 1,
          color: "#667A8E",
        },
      },
      splitLine: {
        // 配置分割线
        show: true,
        lineStyle: {
          color: "rgba(92, 225, 255, 0.5)", // 蓝色分割线
          type: "solid", // 实线
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 20,
        color: "#667A8E",
        formatter: "{value}" + "",
      },
    },
    series: [
      {
        type: "custom",
        renderItem: (params: any, api: any) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#B8EB8F",
                    },
                    {
                      offset: 0.35,
                      color: "#B8EB8F",
                    },
                    {
                      offset: 1,
                      color: "transparent",
                    },
                  ]),
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#B8EB8F",
                    },
                    {
                      offset: 0.35,
                      color: "#B8EB8F",
                    },
                    {
                      offset: 1,
                      color: "transparent",
                    },
                  ]),
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "#B8EB8F",
                },
              },
            ],
          };
        },
        data: yaxisData,
      },
    ],
  };
  myChart1 = echarts.init(document.getElementById("saq") as HTMLElement);
  myChart1.setOption(option);
  myChart1.setOption({
    yAxis: {
      name: activeItem.value === 0 ? "个" : "%",
    },
    series: [
      {
        data: val,
      },
    ],
  });
}

onBeforeMount(() => {
  xaxisData = useOptions().year();
  yaxisData = [];
});
onMounted(() => {

});
</script>

<style lang="less" scoped>
.bottom {
  width: 100%;
  height: 84%;
  display: flex;
}

.list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column wrap;
  padding: 20px;
}
.item{
  width: 100%;

}

.title {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 60px;
  margin-bottom: 20px;
  &.title0{
    background: url("@/assets/image/jianshe/saq_title_0.png") no-repeat left center;
    background-size: auto 100%;
  }
  &.title1{
    background: url("@/assets/image/jianshe/saq_title_1.png") no-repeat left center;
    background-size: auto 100%;
  }
}

.child{
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
}
.childItem{
  flex: 1;
  height: 50px;
  padding-left: 60px;

  &.good{
    background: url("@/assets/image/jianshe/good.png") no-repeat center center;
    background-size: auto 100%;
  }
  &.bad{
    background: url("@/assets/image/jianshe/bad.png") no-repeat center center;
    background-size: auto 100%;
  }
}


</style>
